<template>
    <div id="prompt-text" :style="'background-color:'+color+';'">
        {{ label }}
    </div>
</template>

<script setup>
import { computed, defineProps } from 'vue';
const props = defineProps(["label","color"])
const label = computed(() => { return props.label })
const color = computed(() => { return props.color })

</script>

<style scoped>
#prompt-text{
    line-height: 26px;
    padding: 0 13px;
    margin-right: 10px;
    border-radius: 5px;
    font-size: 13px;
    cursor: pointer;
    transition: font-size 0.5s ease;
}

#prompt-text:hover{
    font-size: 16px;
}
</style>